import { Table, Icon, Row, Col, Button, Spin } from 'antd';
import { WeaTools, WeaInput, WeaSelect } from 'ecCom';
import equal from 'deep-equal';

const { getComponent } = WeaTools;
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

class CustomerShare extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [],
      datas: [],
      selectedRowKeys: [],
      current: 1,
      showGroup: props.showGroup ? props.showGroup : false,
    };
    this.doDelete = this.doDelete.bind(this);
    this.doAdd = this.doAdd.bind(this);
  }
  componentDidMount() {
    const { datas = [], columns = [] } = this.props;
    columns.length > 0 && this.setState(datas.length > 0 ? { datas: this.addKeytoDatas(datas), columns } : { columns });
  }
  componentWillReceiveProps(nextProps, nextState) {
    const { columns = [], datas = [], selectedRowKeys = [] } = this.props;
    const _columns = nextProps.columns || [];
    const _datas = nextProps.datas || [];
    const _selectedRowKeys = nextProps.selectedRowKeys || [];
    !equal(columns, _columns) && this.setState({ columns: _columns });
    this.setState({ datas: this.addKeytoDatas(_datas) });
    !equal(selectedRowKeys, _selectedRowKeys) && this.setState({ selectedRowKeys: _selectedRowKeys });
  }
  addKeytoDatas(datas) {
    const _datas = datas.map((data, i) => {
      const _data = { ...data };
      _data.key = i;
      return _data;
    });
    return _datas;
  }
  render() {
    const { datas, showGroup, columns, selectedRowKeys } = this.state;
    const { title, needAdd, needCopy } = this.props;
    return (
      <div className="wea-crm-table-edit" >
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0jg0kd`} className="wea-title">
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@95xxp0`} span="20">
            <div>{title}</div>
          </Col>
          {needAdd &&
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@fe0ioj`} span="4" style={{ textAlign: 'right', paddingRight: 10 }}>
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@o0uq2t`} type="primary" title={getLabel(1421, '新增')} size="small" onClick={this.doAdd}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@iitrft`} type="plus" /></Button>
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@cgqzg5`} type="primary" disabled={!`${selectedRowKeys}`} title={getLabel(91, '删除')} size="small" onClick={this.doDelete} ><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@vozsrb`} type="minus" /></Button>
            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@df7ni7`} type={showGroup ? 'up' : 'down'} onClick={() => this.setState({ showGroup: !showGroup })} />
          </Col>
          }
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@b2517f`} className="wea-content" style={{ display: showGroup ? 'block' : 'none' }}>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bl4y9k`} className="wea-form-cell-----" span={24}>
            <Table
              ecId={`${this && this.props && this.props.ecId || ''}_Table@fo9fjl`}
              columns={this.getColumns()}
              dataSource={datas}
              pagination={false}
              rowSelection={this.getRowSelection()}
            />
          </Col>
        </Row>

      </div>
    );
  }
  getColumns() {
    const { columns } = this.state;
    let _columns = [].concat(columns);
    _columns = _columns.map((col) => {
      const _col = { ...col };
      _col.render = (text, record, index) => this.getColRender(_col, text, record, index);
      return _col;
    });
    return _columns;
  }
  getColRender(_col, text, record, index) {
    const { com, isLink = false, linkKey = [], linkUrl = '' } = _col;
    const _com = [];
    com.map((c) => {
      if (typeof c.props === 'object') {
        _com.push(c);
      } else {
        const { domkey, viewAttr = 2, key, label, formItemType = 'INPUT', options = [], browserConditionParam = {}, width, value } = c;
        const _type = formItemType.toUpperCase();
        _com.push(
          <span>
            {label && <span style={{ marginLeft: 5 }}>{label}</span>}
            { _type === 'INPUT' && !isLink &&
            <WeaInput
              ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@uvsa6j@${key}`}
              defaultValue={record[key]}
              value={record[key]}
              style={{ width, display: 'inline-block' }}
              viewAttr={viewAttr}
            />
            }
          </span>,
        );
      }
    });
    return (
      <div>
        {_com}
      </div>
    );
  }
  getRowSelection() {
    const { columns, selectedRowKeys } = this.state;
    if (!`${columns}`) return null;
    const rowSelection = {
      selectedRowKeys,
      onChange: (sRowKeys, selectedRows) => {
        this.setState({ selectedRowKeys: sRowKeys });
      },
    };
    return rowSelection;
  }

  doAdd() {
    typeof this.props.addColumns === 'function' && this.props.addColumns();
  }
  doDelete() {
    const { datas, current, selectedRowKeys } = this.state;
    let _datas = [].concat(datas);
    selectedRowKeys.map((key) => {
      _datas = _datas.filter(data => data.key !== key);
    });
    _datas = _datas.map((data, i) => {
      const _data = { ...data };
      _data.key = i;
      return _data;
    });
    this.setState({ datas: _datas, selectedRowKeys: [] });
    this.onChange(_datas);
  }
  onChange(datas) {
    const { columns } = this.state;
    const _datas = datas.map((data, i) => {
      const _data = { ...data };
      delete _data.key;
      return _data;
    });
    typeof this.props.onChange === 'function' && this.props.onChange(_datas, columns);
  }
}

export default CustomerShare;

